import {messages} from "share/common";
import React from 'react'
import menuRoute from 'routes/menuRoute'
import moment from 'moment'
import { connect } from 'react-redux'

import { Form, Tabs, Card, Row, Col, Icon, Progress, Table, Button, Radio, Input, Divider, Spin, message, Popover } from 'antd';
const FormItem = Form.Item;
const TabPane = Tabs.TabPane;
const RadioGroup = Radio.Group;
const TextArea = Input.TextArea;

import noDataImg from 'images/no-data.png'
import Chooser from 'components/chooser'
import SelectAddress from 'components/template/select-address-modal/select-address-modal'
import 'styles/order-management/order-management-detail.scss'
import orderService from 'containers/increment-service/order-management/order-management.service'

class OrderManagementDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      btnLoading: false,
      submitLoading: false,
      addressLoading: false,
      historyLoading: false,
      applyInvoiceFormVisible: false,
      selectAddressVisible: false,
      orderType: {
        NEW_BUY: messages('order-management.key81')/*新购*/,
        ADD_BUY: messages('order-management.key67')/*加购*/,
        RENEWAL: messages('order-management.key78')/*续费*/,
      },
      orderStatus: { //订单状态
        WAIT_PAYMENT: messages('order-management.key1')/*待付款*/,
        PAID: messages('order-management.key2')/*已付款*/,
        CLOSED: messages('order-management.key3')/*已关闭*/
      },
      statusNote: {
        WAIT_PAYMENT: messages('order-management.key1')/*待付款*/,
        WAIT_CONFIRM_PAYMENT: messages('order-management.key61')/*待确认付款*/,//(客户点击已付款按钮后的标记)
        WAIT_EFFECTIVE: messages('order-management.key62')/*待生效*/,
        USING: messages('order-management.key63')/*使用中*/,
        BEYOND_UPPER_LIMIT: messages('order-management.key64')/*超上限*/,
        NON_PAYMENT_OVERTIME: messages('order-management.key65')/*超时未付*/,
        EXPIRED: messages('order-management.key66')/*到期*/,
        CANCEL: messages('common.cancel')/*取消*/,
        ADD_BUY: messages('order-management.key67')/*加购*/,
        ONLINE_CLOSED: messages('order-management.key82')/*线上关闭*/,//(线上关闭支付订单)
        ONLINE_REFUND: messages('order-management.key83')/*线上退款*/,//(线上订单退款)
      },
      tabs: [
        {tab: messages('order-management.key4')/*订单详情*/, key: 'order'},
        {tab: messages('order-management.key5')/*操作历史*/, key: 'history'}
      ],
      activeTab: 'order',
      historyColumns: [
        {title: messages('order-management.key6')/*操作时间*/, dataIndex: 'operationTime', width: '20%', render: value => moment(value).format('YYYY-MM-DD HH:mm')},
        {title: messages('order-management.key7')/*操作人姓名*/, dataIndex: 'username', width: '20%'},
        {title: messages('order-management.key8')/*操作类型*/, dataIndex: 'operationType', width: '20%'},
        {title: messages('order-management.key9')/*操作说明*/, dataIndex: 'operationTitle', width: '40%', render: value => (
          <Popover content={value}>{value}</Popover>
        )}
      ],
      info: {},
      invoiceInfo: {},
      address: {},
      historyData: [],
      historyPage: 0,
      historySize: 10,
      pagination: {
        total: 0
      },
      invoiceType: 'plain', //发票类型
      orderList: menuRoute.getRouteItem('order-management'), //订单列表
    }
  }

  componentDidMount() {
    this.getInfo();
    this.getInvoiceInfo();
    this.getHistory()
  }

  getInfo = () => {
    this.setState({ loading: true });
    orderService.getOrderDetail({id: this.props.params.id}).then(res => {
      let status = res.data.status;
      let subStatus = res.data.subStatus;
      let tabs = this.state.tabs;
      let arr = ["CONTACT_ORDER", "CS_PRESENT", "SALESMAN_PRESENT"];
      if ((status === 'PAID' || (status === 'CLOSED' && subStatus !== 'NON_PAYMENT_OVERTIME' && subStatus !== 'CANCEL'))
        && (arr.indexOf(res.data.orderType) === -1)
      ) {
        tabs = [
          {tab: messages('order-management.key4')/*订单详情*/, key: 'order'},
          {tab: messages('order-management.key10')/*发票信息*/, key: 'invoice'},
          {tab: messages('order-management.key5')/*操作历史*/, key: 'history'}
        ];
      }
      this.setState({
        loading: false,
        info: res.data,
        tabs,
        activeTab: this.props.location.query.tab || 'order'
      })
    })
  };

  //开票信息
  getInvoiceInfo = () => {
    orderService.getInvoiceInfo({orderId: this.props.params.id}).then(res => {
      this.setState({invoiceInfo: res.data || {}})
    })
  };

  //操作历史
  getHistory = () => {
    let params = {
      entityType: 'ORDER_INFO',
      entityId: this.props.params.id,
      page: this.state.historyPage,
      size: this.state.historySize
    };
    this.setState({ historyLoading: true });
    orderService.getHistoryList(params).then(res => {
      this.setState({
        historyLoading: false,
        historyData: res.data,
        pagination: {
          total: Number(res.headers['x-total-count']) || 0,
          current: this.state.historyPage + 1,
          onChange: this.onChangePaper
        }
      })
    })
  };

  onChangePaper = (page) => {
    if (page - 1 !== this.state.historyPage) {
      this.setState({ historyPage: page - 1 }, () => {
        this.getHistory()
      })
    }
  };

  //点击【申请开票】按钮
  toApplyInvoice = () => {
    this.getDefaultAddress();
    this.setState({ applyInvoiceFormVisible: true })
  };

  //申请发票
  handleApplyInvoice = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const { address } = this.state;
        if (!address.billingContactOID) {
          message.error(messages('order-management.key11')/*请选择收货地址*/)
        } else {
          values.titleType = 'enterprise';
          values.orderId = this.props.params.id;
          values.receiver = address.fullName;
          values.mobile = address.phone;
          values.address = address.fullReceiverAddress;
          if (values.bankId && values.bankId[0]) {
            values.bankBranchName = values.bankId[0].bankBranchName;
            values.bankId = values.bankId[0].id;
          }
          this.setState({
            btnLoading: true,
            submitLoading: true,
          });
          orderService.newInvoice(values).then(res => {
            this.setState({
              btnLoading: false,
              submitLoading: false,
              invoiceInfo: res.data
            }, () => {
              this.renderTabInvoice()
            })
          }).catch(err => {
            this.setState({
              btnLoading: false,
              submitLoading: false,
            });
          })
        }
      }
    })
  };

  //获取默认地址
  getDefaultAddress = () => {
    this.setState({ addressLoading: true });
    orderService.getDefaultAddress().then(res => {
      this.setState({
        addressLoading: false,
        address: res.data
      })
    }).catch(() => {
      this.setState({ addressLoading: false })
    })
  };

  //渲染基本信息
  renderBasicInfoItem = (title, value) => {
    return (
      <Row>
        <Col span={9}>{title}</Col>
        <Popover placement="topLeft"
                 overlayStyle={{maxWidth: 500}}
                 content={value}>
          <Col span={14} offset={1} style={{overflow: "hidden", textOverflow:'ellipsis', whiteSpace:'nowrap', }}>{value}</Col>
        </Popover>
      </Row>
    )
  };

  //渲染tab 订单详情
  renderTabOrder = () => {
    const { info, orderStatus, statusNote, orderType } = this.state;
    let used = info.usedCount ? info.usedCount : 0;
    let total = info.upperLimit;
    let used1 = info.boundLegalEntityCount;
    let total1 = info.buyCount;
    return (
      <div className="order-container">
        <Card title={messages('common.baseInfo')/*基本信息*/} bordered={false}>
          <Row>
            <Col span={8}>{this.renderBasicInfoItem(messages('order-management.key12')/*订单编号*/, info.orderCode)}</Col>
            <Col span={8} >{this.renderBasicInfoItem(messages('order-management.key13')/*服务名称*/, info.serviceName)}</Col>
            <Col span={8}>{this.renderBasicInfoItem(messages('order-management.key14')/*价格*/, `${info.actualAmount || 0}${messages('order-management.key15')/*元*/}`)}</Col>
          </Row>
          <Row>
            <Col span={8}>{this.renderBasicInfoItem(messages('order-management.key16')/*订单类型*/, info.orderTypeName)}</Col>
            <Col span={8}>{this.renderBasicInfoItem(messages('order-management.key17')/*订单状态*/, info.statusName)}</Col>
            <Col span={8}>{this.renderBasicInfoItem(messages('order-management.key18')/*状态说明*/, statusNote[info.subStatus])}</Col>
          </Row>
          <Row>
            <Col span={8} >
              {this.renderBasicInfoItem(messages('order-management.key19')/*订单创建日期*/, moment(info.createdDate).format('YYYY-MM-DD'))}
            </Col>
          <Col span={8}>
            <Row>
              <Col span={9}>{messages('order-management.key25')/*订单金额*/}</Col>
              <Col span={14} offset={1} >{this.filterMoney(info.totalAmount || 0)}{messages('order-management.key15')/*元*/}</Col>
            </Row>
          </Col>
          {/*<Col span={8}>*/}
          {/*<Row>*/}
          {/*<Col span={8}>{messages('order-management.key26')/*优惠金额*!/：</Col>*/}
          {/*<Col span={16}>{this.filterMoney(info.discountAmount || 0)}{messages('order-management.key15')/*元*!/</Col>*/}
          {/*</Row>*/}
          {/*</Col>*/}
          <Col span={8}>
            <Row>
              <Col span={9}>{messages('order-management.key27')/*应付金额*/}</Col>
              <Col span={14} offset={1} >{this.filterMoney(info.actualAmount || 0)}{messages('order-management.key15')/*元*/}</Col>
            </Row>
          </Col>
          </Row>
            <Row>
            {
              info.countUnitName &&
              <Col span={8} >
                {this.renderBasicInfoItem(messages('common.number')/*数量*/, (info.buyCount + info.countUnitName))}
              </Col>
            }
            {
              info.timeUnitName &&
              <Col span={8} >
                {this.renderBasicInfoItem(messages('order-management.key22')/*时长*/, (info.buyTimeCount + info.timeUnitName))}
              </Col>
            }
            {
              info.upperLimit &&
              <Col span={8} >
                {this.renderBasicInfoItem(messages('order-management.key23')/*上限限制*/, `${info.upperLimit}${messages('order-management.key24')/*张*/}`)}
              </Col>
            }
              {
                info.bankName &&
                <Col span={8} >
                  {this.renderBasicInfoItem(messages('increment-service.key20')/*购买服务银行*/, info.bankName)}
                </Col>
              }
            {
              info.effectiveDate &&
              <Col span={8} >
                {this.renderBasicInfoItem(messages('order-management.key20')/*服务生效日期*/, moment(info.effectiveDate).format('YYYY-MM-DD'))}
              </Col>
            }
            {
              info.serviceTypeCode === "CHECK_INVOICE" && (info.priceMode === 1001 || info.priceMode === 1003) && info.expireDate &&
              <Col span={8} >
                {this.renderBasicInfoItem(messages('order-management.key21')/*服务到期日期*/, moment(info.expireDate).format('YYYY-MM-DD'))}
              </Col>
            }
          </Row>
        </Card>
        {
          info.status === "PAID" && info.subStatus === "USING" && (total || total1) &&
          <Card title={messages('order-management.key28')/*使用状况*/} bordered={false}>
            <div className="progress-container">
              {
                total &&
                <div>
                  <div className="num-view">
                    <div
                      className="num-total">{messages('order-management.key29')/*总上限数*/}：{total}{messages('order-management.key24')/*张*/}</div>
                    <div className="num-used">
                      <div>{messages('order-management.key30')/*已使用*/}：{used}{messages('order-management.key24')/*张*/}</div>
                      <div>{messages('common.remain')/*剩余*/}：{total - used}{messages('order-management.key24')/*张*/}</div>
                    </div>
                  </div>
                  <Progress percent={used / total * 100} status="exception" showInfo={false}/>
                  <div>
                    {used < total && <span style={{position: 'relative', left: `${used / total * 100}%`}}>{used}</span>}
                    <span style={{float: 'right'}}>{total}</span>
                  </div>
                </div>
              }
            </div>
            {
              used1 === undefined ?
                null
              //   total1 &&
              // <div>
              //   <div className="num-view">
              //     <div
              //       className="num-total">{messages('increment-service.key1')/*可用张数*/}：{total1}{messages('order-management.key24')/*张*/}</div>
              //     <div className="num-used">
              //       <div>{messages('order-management.key30')/*已使用*/}：{used}{messages('order-management.key24')/*张*/}</div>
              //       <div>{messages('common.remain')/*剩余*/} ：{total1 - used}{messages('order-management.key24')/*张*/}</div>
              //     </div>
              //   </div>
              //   <Progress percent={used / total1 * 100} status="exception" showInfo={false}/>
              //   <div>
              //     {used < total1 && <span style={{position: 'relative', left: `${used / total1 * 100}%`}}>{used}</span>}
              //     <span style={{float: 'right'}}>{total1}</span>
              //   </div>
              // </div>
                :
                total1 &&
                info.serviceTypeCode === "BWE" ?
                <div>
                  <div className="num-view">
                    <div className="num-total">{messages('increment-service.key16')/*可绑定银行账户总数*/}：{total1}</div>
                    <div className="num-used">
                      <div>{messages('increment-service.key17')/*已绑定银行账户数量*/}：{used1}</div>
                      <div>{messages('increment-service.key18')/*剩余银行账户数量*/}：{total1 - used1}</div>
                    </div>
                  </div>
                  <Progress percent={used1 / total1 * 100} status="exception" showInfo={false}/>
                  <div>
                    {used1 < total1 && <span style={{position: 'relative', left: `${used1 / total1 * 100}%`}}>{used1}</span>}
                    <span style={{float: 'right'}}>{total1}</span>
                  </div>
                </div>
                  :
                <div>
                  <div className="num-view">
                    <div
                      className="num-total">{messages('order-management.key31')/*可绑定法人总数*/}：{total1}</div>
                    <div className="num-used">
                      <div>{messages('order-management.key32')/*已绑定法人数量*/}：{used1}</div>
                      <div>{messages('order-management.key33')/*剩余法人数量*/}：{total1 - used1}</div>
                    </div>
                  </div>
                  <Progress percent={used1 / total1 * 100} status="exception" showInfo={false}/>
                  <div>
                    {used1 < total1 && <span style={{position: 'relative', left: `${used1 / total1 * 100}%`}}>{used1}</span>}
                    <span style={{float: 'right'}}>{total1}</span>
                  </div>
                </div>
            }
            <div>
            </div>
          </Card>
        }
      </div>
    )
  };

  //渲染tab 发票信息
  renderTabInvoice = () => {
    const { invoiceInfo, addressLoading } = this.state;
    if (invoiceInfo.id) {
      return (
        <div className="invoice-container">
          <Card title={messages('order-management.key34')/*开票信息*/} bordered={false}>
            <Row className="invoice-info-row">
              <Col span={8}>{this.renderBasicInfoItem(messages('order-management.key35')/*发票抬头*/, invoiceInfo.title)}</Col>
              <Col span={8}>{this.renderBasicInfoItem(messages('order-management.key36')/*纳税人识别号*/, invoiceInfo.taxNumber)}</Col>
              <Col span={8}>{this.renderBasicInfoItem(messages('common.invoice.type')/*发票类型*/, invoiceInfo.invoiceType === 'plain' ? messages('order-management.key37')/*增值税普通发票*/ : messages('order-management.key38')/*增值税专用发票*/)}</Col>
            </Row>
            {invoiceInfo.invoiceType === 'special' && (
              <div>
                <Row className="invoice-info-row" gutter={10}>
                  <Col span={8}>{this.renderBasicInfoItem(messages('order-management.key39')/*银行账户*/, invoiceInfo.bankAccount)}</Col>
                  <Col span={8}>{this.renderBasicInfoItem(messages('order-management.key40')/*开户行*/, invoiceInfo.bankBranchName)}</Col>
                  <Col span={8}>{this.renderBasicInfoItem(messages('order-management.key41')/*电话*/, invoiceInfo.enterpriseMobile)}</Col>
                </Row>
                <Row className="invoice-info-row" gutter={10}>
                  <Col span={8}>{this.renderBasicInfoItem(messages('order-management.key42')/*地址*/, invoiceInfo.enterpriseAddress)}</Col>
                </Row>
              </div>
            )}
          </Card>
          <Card title={messages('order-management.key43')/*邮寄信息*/} bordered={false}>
            <Row className="post-info-row">
              <Col span={3}>{messages('order-management.key44')/*收件人姓名*/}：</Col>
              <Col span={20}>{invoiceInfo.receiver}</Col>
            </Row>
            <Row className="post-info-row">
              <Col span={3}>{messages('order-management.key45')/*收件人联系电话*/}：</Col>
              <Col span={20}>{invoiceInfo.mobile}</Col>
            </Row>
            <Row className="post-info-row">
              <Col span={3}>{messages('order-management.key42')/*地址*/}：</Col>
              <Col span={20}>{invoiceInfo.address}</Col>
            </Row>
            <Row className="post-info-row">
              <Col span={3}>{messages('common.remark')/*备注*/}：</Col>
              <Col span={20}>{invoiceInfo.remark}</Col>
            </Row>
          </Card>
        </div>
      )
    } else {
      const { getFieldDecorator } = this.props.form;
      const { applyInvoiceFormVisible, info, address, btnLoading, invoiceType, submitLoading } = this.state;
      const formItemLayout = {
        labelCol: {span: 4},
        wrapperCol: {span: 10, offset: 1}
      };
      const formItemLayout1 = {
        labelCol: {span: 4},
        wrapperCol: {span: 17, offset: 1}
      };
      return (
        <div className="no-invoice-container">
          {applyInvoiceFormVisible ? (
            <div>
              <Form className="invoice-form" onSubmit={this.handleApplyInvoice}>
                <FormItem {...formItemLayout} label={messages('order-management.key12')/*订单编号*/} colon={false}>
                  <div>{info.orderCode}</div>
                </FormItem>
                <FormItem {...formItemLayout} label={messages('order-management.key46')/*实付金额*/} colon={false}>
                  <div>{this.filterMoney(info.actualAmount  || 0)}{messages('order-management.key15')/*元*/}</div>
                </FormItem>
                <Divider/>
                <FormItem {...formItemLayout} label={messages('order-management.key47')/*抬头类型*/} colon={false}>
                  <div>{messages('order-management.key48')/*企业*/}</div>
                </FormItem>
                <FormItem {...formItemLayout} colon={false} label={messages('common.invoice.type')/*发票类型*/}>
                  {getFieldDecorator('invoiceType', {
                    initialValue: 'plain'
                  })(
                    <RadioGroup onChange={e => this.setState({ invoiceType: e.target.value })}>
                      <Radio value="plain">{messages('order-management.key37')/*增值税普通发票*/}</Radio>
                      <Radio value="special">{messages('order-management.key38')/*增值税专用发票*/}</Radio>
                    </RadioGroup>
                  )}
                </FormItem>
                <FormItem {...formItemLayout} label={messages('order-management.key34')/*开票信息*/} colon={false} />
                <Row>
                  <Col span={14} offset={2} className="input-invoice-info">
                    <FormItem {...formItemLayout1} label={messages('order-management.key35')/*发票抬头*/} colon={false}>
                      {getFieldDecorator('title', {
                        rules: [{
                          required: true,
                          message: messages('common.please.input')/*请输入*/
                        }],
                      })(
                        <Input placeholder={messages('common.please.input')/*请输入*/}/>
                      )}
                    </FormItem>
                    <FormItem {...formItemLayout1} label={messages('order-management.key49')/*企业税号*/} colon={false}>
                      {getFieldDecorator('taxNumber', {
                        rules: [{
                          required: true,
                          message: messages('common.please.input')/*请输入*/
                        }],
                      })(
                        <Input placeholder={messages('common.please.input')/*请输入*/}/>
                      )}
                    </FormItem>
                    {invoiceType === 'special' && (
                      <div>
                        <FormItem {...formItemLayout1} label={messages('order-management.key50')/*银行账号*/} colon={false}>
                          {getFieldDecorator('bankAccount', {
                            rules: [{
                              required: true,
                              message: messages('common.please.input')/*请输入*/
                            }],
                          })(
                            <Input placeholder={messages('common.please.input')/*请输入*/}/>
                          )}
                        </FormItem>
                        <FormItem {...formItemLayout1} label={messages('order-management.key40')/*开户行*/} colon={false}>
                          {getFieldDecorator('bankId', {
                            rules: [{
                              required: true,
                              message: messages('common.select')/*请选择*/
                            }],
                          })(
                            <Chooser single={true}
                                     type="select_bank"
                                     placeholder={messages('common.select')/*请选择*/}
                                     labelKey="bankBranchName"
                                     valueKey="bankCode"/>
                          )}
                        </FormItem>
                        <FormItem {...formItemLayout1} label={messages('order-management.key41')/*电话*/} colon={false}>
                          {getFieldDecorator('enterpriseMobile', {
                            rules: [{
                              required: true,
                              message: messages('common.please.input')/*请输入*/
                            }],
                          })(
                            <Input placeholder={messages('common.please.input')/*请输入*/}/>
                          )}
                        </FormItem>
                        <FormItem {...formItemLayout1} label={messages('order-management.key42')/*地址*/} colon={false}>
                          {getFieldDecorator('enterpriseAddress', {
                            rules: [{
                              required: true,
                              message: messages('common.please.input')/*请输入*/
                            }],
                          })(
                            <Input placeholder={messages('common.please.input')/*请输入*/}/>
                          )}
                        </FormItem>
                      </div>
                    )}
                  </Col>
                </Row>
                <FormItem {...formItemLayout}
                          label={<span className="ant-form-item-required">{messages('order-management.key51')/*收件信息*/}</span>}
                          colon={false}>
                  {getFieldDecorator('receiver')(
                    addressLoading ? (
                      <Icon type="loading" />
                    ) : (
                      <div>
                        {address.billingContactOID ? (
                          <div>
                            <div><a onClick={() => this.setState({selectAddressVisible: true})}>{messages('order-management.key52')/*更改收件地址*/}</a></div>
                            <div>{address.fullName} {address.phone}</div>
                            <div>{address.fullReceiverAddress}</div>
                          </div>
                        ) : (
                          <a onClick={() => this.setState({selectAddressVisible: true})}><Icon type="plus" />{messages('order-management.key53')/*添加收件地址*/}</a>
                        )}
                      </div>
                    )
                  )}
                </FormItem>
                <FormItem {...formItemLayout} label={messages('common.remark')/*备注*/} colon={false}>
                  {getFieldDecorator('remark', {
                    rules: [{
                      required: true,
                      message: messages('common.please.input')/*请输入*/
                    }, {
                      max: 100,
                      message: messages('order-management.key54')/*最多输入100个字符*/
                    }],
                  })(
                    <TextArea placeholder={messages('common.please.input')/*请输入*/} style={{resize: 'none'}}/>
                  )}
                </FormItem>
                <Row>
                  <Col span={15} className="buttons">
                    <Button className="next" onClick={() => this.setState({applyInvoiceFormVisible: false})}>{messages('common.cancel')/*取消*/}</Button>
                    <Button type="primary" htmlType="submit" loading={submitLoading}>{messages('order-management.key55')/*提交申请*/}</Button>
                  </Col>
                </Row>
              </Form>
            </div>
          ) : (
            <div>
              <img src={noDataImg} className="no-invoice-info-img" />
              <div className="notice-info">{messages('order-management.key56')/*您还未申请开具发票*/}</div>
              <Button type="primary" loading={btnLoading}
                      onClick={this.toApplyInvoice}>{messages('order-management.key57')/*申请开票*/}</Button>
            </div>
          )}
        </div>
      )
    }
  };

  //选择收件地址
  handleSelectAddress = (value) => {
    this.setState({
      selectAddressVisible: false,
      address: value
    })
  };

  //渲染tab 操作历史
  renderTabHistory = () => {
    const { historyLoading, historyColumns, historyData, pagination } = this.state;
    return (
      <div className="history-container">
        <Table rowKey="id"
               columns={historyColumns}
               dataSource={historyData}
               pagination={pagination}
               loading={historyLoading}
               size="middle"
               bordered
        />
      </div>
    )
  };

  //返回
  handleBack = () => {
    this.context.router.push(this.state.orderList.url)
  };

  render(){
    const { tabs, activeTab, loading, selectAddressVisible, address } = this.state;
    return (
      <div className="order-management-detail">
        <Tabs onChange={value => this.setState({activeTab: value})} activeKey={activeTab}>
          {tabs.map(item => <TabPane tab={item.tab} key={item.key} />)}
        </Tabs>
        <Spin spinning={loading}>
          {activeTab === 'order' && this.renderTabOrder()}
          {activeTab === 'invoice' && this.renderTabInvoice()}
          {activeTab === 'history' && this.renderTabHistory()}
        </Spin>
        <a style={{paddingBottom: 20}} onClick={this.handleBack}>
          <Icon type="rollback" style={{marginRight: 5}}/>{messages('common.back')/*返回*/}
        </a>
        <SelectAddress visible={selectAddressVisible}
                       selectedOID={address.billingContactOID}
                       onCancel={() => this.setState({selectAddressVisible: false})}
                       onOk={this.handleSelectAddress}
        />
      </div>
    )
  }

}

OrderManagementDetail.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return { }
}

const wrappedOrderManagementDetail = Form.create()(OrderManagementDetail);

export default connect(mapStateToProps)(wrappedOrderManagementDetail);
